<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小米商城首页</title>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/top-bar.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/choose.css">
    <link rel="stylesheet" href="./css/advertising.css">
    <link rel="stylesheet" href="./css/seckill.css">
    <link rel="stylesheet" href="./css/commodity.css">
    <link rel="stylesheet" href="./css/afterbody.css">
    <link rel="icon" href="./images/logo-footer.png">
    <script src="./js/jquery.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!--右侧固定导航栏-->
    <div class="bar-right">
        <ul>
            <li>
                <a href="#">
                    <div class="bar-link">
                        <img src="./images/小图标/手机app.png" alt="" class="bar-image">
                        <p>手机二维码</p>
                    </div>
                </a>

            </li>
            <li>
                <a href="#">
                    <div class="bar-link">
                        <img src="./images/小图标/个人中心.png" alt="" class="bar-image">
                        <p>个人中心</p>
                    </div>
                </a>

            </li>
            <li>
                <a href="#">
                    <div class="bar-link">
                        <span class="iconfont icon-buoumaotubiao46
                        "></span>
                        <p>售后服务</p>
                    </div>
                </a>

            </li>
            <li>
                <a href="#">
                    <div class="bar-link">
                        <img src="./images/小图标/联系客服.png" alt="" class="bar-image">
                        <p>人工客服</p>
                    </div>
                </a>

            </li>
            <li>
                <a href="#">
                    <div class="bar-link">
                        <img src="./images/小图标/购物车.png" alt="" class="bar-image">
                        <p>购物车</p>
                    </div>
                </a>

            </li>
            <li>
                <div class="little-box-none"></div>
            </li>
            <li>
                <a href="#">
                    <div class="bar-link">
                        <img src="./images/小图标/回顶部.png" alt="" class="bar-image">
                        <p>回到顶部</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>

    <!-- 顶部导航栏 -->
    <div class="top">
        <div class="centre">
            <div class="top-nav">
                <div class="top-navigation">
                    <a href="#">小米商城</a>
                    <span class="spn">|</span>
                    <a href="#">MIUI</a>
                    <span class="spn">|</span>
                    <a href="#">ioT</a>
                    <span class="spn">|</span>
                    <a href="#">云服务</a>
                    <span class="spn">|</span>
                    <a href="#">金融</a>
                    <span class="spn">|</span>
                    <a href="#">有品</a>
                    <span class="spn">|</span>
                    <a href="#">小爱开放平台</a>
                    <span class="spn">|</span>
                    <a href="#">企政服务</a>
                    <span class="spn">|</span>
                    <a href="#">下载app</a>
                    <span class="spn">|</span>
                    <a href="#">Select Region</a>

                </div>
                <div class="top-shop">
                    <a href="#" id="cart_list" class="iconfont icon-gouwuche">&nbsp;购物车</a>
                </div>
                <div class="laned">
                    <a href="#" id="login">登陆</a>
                    <span class="spn">|</span>
                    <a href="#" id="register">注册</a>
                    <span class="spn">|</span>
                    <a href="#">消息通知</a>
                </div>
            </div>

        </div>
    </div>
    <!-- 头部导航栏 -->
    <div class="centre">
        <div class="logo"><img src="./images/logo-footer.png" alt=""></div>
        <div class="nav">
            <ul>
                <li class="blank-li"></li>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">空调</a></li>
                <li><a href="#">新品</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
                <li></li>
            </ul>
        </div>

        <!-- 头部右侧搜索框 -->
        <div class="search">
            <form action="#" method="get">
                <input type="search" class="search-box" id="search" name="search" value="">
                <a class="search-submit">
                    <span class="iconfont icon-Magnifier"></span>
                </a>
            </form>
        </div>

    </div>
    <!-- 轮播图区 -->
    <div class="centre">
        <a href="#">
            <img src="./images/xmad_1542593050318_TVIrS.jpg" class="commodity-img" alt="">
        </a>
        <div class="choose">
            <ul>
                <li><a href="#">手机 电话卡 <span class="choose-spn">></span></a></li>
                <li><a href="#">电视 盒子<span class="choose-spn">></span></a></li>
                <li><a href="#">笔记本 平板<span class="choose-spn">></span></a></li>
                <li><a href="#">家电 插线板<span class="choose-spn">></span></a></li>
                <li><a href="#">出行 穿戴<span class="choose-spn">></span></a></li>
                <li><a href="#">智能 路由器<span class="choose-spn">></span></a></li>
                <li><a href="#">电源 配件<span class="choose-spn">></span></a></li>
                <li><a href="#">健康 儿童<span class="choose-spn">></span></a></li>
                <li><a href="#">耳机 音响<span class="choose-spn">></span></a></li>
                <li><a href="#">生活 箱包<span class="choose-spn">></span></a></li>
            </ul>
        </div>
    </div>
    <!-- 展示区域 -->
    <div class="centre">
        <div class="rest">
            <ul>
                <li>
                    <a href="#" class="rest-link">
                        <span class="iconfont icon-clock"></span>
                        <p>小米秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="rest-link">
                        <span class="iconfont icon-building_"></span>
                        <p>企业团购</p>
                    </a>
                </li>

                <li>
                    <a href="#" class="rest-link">
                        <span class="iconfont icon-F"></span>
                        <p>F码通道</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="rest-link">
                        <span class="iconfont icon-wifidianhuaqia"></span>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="rest-link">
                        <span class="iconfont icon-qian4"></span>
                        <p>以旧换新</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="rest-link">
                        <span class="iconfont icon-qianmoney113"></span>
                        <p>话费充值</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="advertising">
            <ul>
                <li>
                    <a href="#"><img src="./images/xmad_15373422669527_eTZiJ.jpg" class="img1" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xmad_15381015124677_QcEGp.jpg" class="img1" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/xmad_15410029988871_TdzPQ.jpg" class="img1" alt=""></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 小米闪购 -->
    <h2 class="title">小米闪购</h2>
    <div class="centre">
        <div class="seckill-box">
            <div class="time-title">
                <ul>
                    <li>
                        <div class="time">10：00场</div>
                        <img src="./images/flashpurchase.png" alt="">
                        <div class="over-time">距离结束还有</div>
                        <div class="countdown">
                            <div class="timebox">01</div>
                            <div class="box-interval">:</div>
                            <div class="timebox">01</div>
                            <div class="box-interval">:</div>
                            <div class="timebox">29</div>

                        </div>
                    </li>
                </ul>
            </div>
            <div class="seckill">
                <ul>
                    <li>
                        <a href="#">
                            <div class="seckill-1">
                                <p class="flag">9.9元秒杀</p>
                                <img src="./images/抢购图片1.jpg" alt="" class="seckill-img">
                                <h3 class="share-h3">小米小钢炮蓝牙音响2 白色</h3>
                                <p class="p-3">精简设计、专业喇叭</p>
                                <p class="p-4">9.9元 <span class="original-price">120元</span></p>

                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="seckill-1">
                                <p class="flag">1元秒杀</p>
                                <img src="./images/抢购图片3.jpg" alt="" class="seckill-img">
                                <h3 class="share-h3">小米移动电源2 (5000mah版)</h3>
                                <p class="p-3">锂聚合物电芯，轻巧便捷</p>
                                <p class="p-4">1元 <span class="original-price">49元</span></p>

                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="seckill-1">
                                <p class="flag">5折秒杀</p>
                                <img src="./images/抢购图片2.jpg" alt="" class="seckill-img">
                                <h3 class="share-h3">小米游戏耳机 黑色</h3>
                                <p class="p-3">7.1虚拟环绕立体声引擎</p>
                                <p class="p-4">174.5元 <span class="original-price">349元</span></p>

                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="seckill-1">
                                <p class="flag">立减250</p>
                                <img src="./images/抢购图片4.jpg" alt="" class="seckill-img">
                                <h3 class="share-h3">红米Note 5 3GB+32GB 玫瑰金</h3>
                                <p class="p-3">1.4um大像素 AI双摄</p>
                                <p class="p-4">849元 <span class="original-price">1089元</span></p>

                            </div>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 手机区域 -->
    <div class="centre">
        <a href="#"><img src="./images/广告.jpg" alt="" class="advertising-img extra-config"></a>
    </div>
    <div class="page-main">
        <h2 class="title">手机</h2>
        <div class="centre">
            <div class="left-advertising">
                <img src="./images/小米max3.jpg" alt="" class="left-advertising">
            </div>

            <div class="main-box">
                <ul>
                    <li class="little-box">
                        <div class="flag flag-new">新品</div>
                        <a href="#">
                            <div>
                                <img src="./images/phone1.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米8 青春版 4GB+64GB</p>
                                <p class="p-3">潮流镜面渐变色，2400万自拍旗舰</p>
                                <p class="price">1339元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new">新品</div>
                        <a href="#">
                            <div>
                                <img src="./images/phone2.png" alt="" class="phone-image">
                                <p class="share-h3">小米8 屏幕指纹版 8GB+128GB</p>
                                <p class="p-3">全球首款感压屏幕指纹，双频GPS超...</p>
                                <p class="price">3599元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag">减 300 元</div>
                        <a href="#">
                            <div>
                                <img src="./images/phone3.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米8 SE 4GB+64GB</p>
                                <p class="p-3">AI超感光双摄，三星AMOLED屏幕</p>
                                <p class="price">1499元 <span class="original-price">1799元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag">减 600 元</div>
                        <a href="#">
                            <div>
                                <img src="./images/phone4.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米MIX 2S 8GB+256GB</p>
                                <p class="p-3">骁龙845 年度旗舰处理器，艺术品般...</p>
                                <p class="price">1339元 <span class="original-price">3999元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag">减 350 元</div>
                        <a href="#">
                            <div>
                                <img src="./images/phone5.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米6X 6GB+128GB</p>
                                <p class="p-3">轻薄美观的拍照手机</p>
                                <p class="price">1649 <span class="original-price">1999 元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag">减 100 元</div>
                        <a href="#">
                            <div>
                                <img src="./images/phone6.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米Max3 4GB+64GB</p>
                                <p class="p-3"></p>
                                <p class="price">1599元 <span class="original-price">1699元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag">减 130 元</div>
                        <a href="#">
                            <div>
                                <img src="./images/phone7.jpg" alt="" class="phone-image">
                                <p class="share-h3">红米6 Pro 3GB+32GB</p>
                                <p class="p-3"></p>
                                <p class="price">869元 <span class="original-price">999元</span></p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag">减 30 元</div>
                        <a href="#">
                            <div>
                                <img src="./images/phone8.jpg" alt="" class="phone-image">
                                <p class="share-h3">红米6A 2GB+16GB</p>
                                <p class="p-3"></p>
                                <p class="price">569元 <span class="original-price">599元</span></p>
                            </div>
                        </a>
                    </li>

                </ul>
            </div>
        </div>

        <!-- 家电区域 -->
        <div class="centre">
            <a href="#"><img src="./images/xmad_15421601390247_IARnQ.jpg" alt="" class="advertising-img"></a>
        </div>
        <h2 class="title">家电</h2>
        <div class="centre">
            <div class="left-advertising">
                <img src="./images/家电广告1.jpg" alt="" class="home-appliances">
                <img src="./images/家电广告2.jpg" alt="" class="home-appliances">
            </div>
            <div class="main-box">
                <ul>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/电脑图片1.jpg" alt="" class="phone-image">
                                <p class="share-h3">15.6 Pro i5 8G 1050MAX-Q 256G</p>
                                <p class="p-3"></p>
                                <p class="price">6299元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/电脑图片2.jpg" alt="" class="phone-image">
                                <p class="share-h3">13.3"小米笔记本Air 四核i7 8G 256G</p>
                                <p class="p-3"></p>
                                <p class="price">5999元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new">新品</div>
                        <a href="#">
                            <div>
                                <img src="./images/电脑图片3.png" alt="" class="phone-image">
                                <p class="share-h3">小米游戏本15.6"8代i7 16G 1TB</p>
                                <p class="p-3"></p>
                                <p class="price">8999元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/电脑图片4.jpg" alt="" class="phone-image">
                                <p class="share-h3">13.3"小米笔记本Air 四核i7 8G 256G MX150 银色</p>
                                <p class="p-3"></p>
                                <p class="price">5999元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/鼠标1.png" alt="" class="phone-image">
                                <p class="share-h3">小米无线鼠标</p>
                                <p class="p-3">耐脏亲肤涂层，人体工学设计</p>
                                <p class="price">69元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/鼠标2.jpg" alt="" class="phone-image">
                                <p class="share-h3">小米便携鼠标</p>
                                <p class="p-3">轻薄便携，铝合金外壳+ABS材质</p>
                                <p class="price">99元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <div class="flag flag-new flag-none"></div>
                        <a href="#">
                            <div>
                                <img src="./images/键盘1.png" alt="" class="phone-image">
                                <p class="share-h3">悦米机械键盘</p>
                                <p class="p-3">铝合金机身，TTC鸿洲，87键</p>
                                <p class="price">289元</p>
                            </div>
                        </a>
                    </li>
                    <li class="little-box">
                        <a href="#">
                            <div class="water">
                                <img src="./images/小米净水器.jpg" alt="" class="water-image">
                                <p class="share-h3 " style="margin-top: 5px;margin-left: 30px">小米净水器</p>
                                <p class="p-3"></p>
                                <p class="price" style="margin-top: 5px">100元</p>
                            </div>
                        </a>

                        <div class="little-box-none"></div>
                        <a href="#">
                            <div class="water">
                                <h1 class="share-h3" style="font-size: 20px;padding-right: 70px">浏览更多</h1>
                                <p class="p-3 character" style="padding-right: 70px">热门</p>
                                <img src="./images/前往.png" alt="" class="water-image2">

                            </div>
                        </a>

                    </li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 服务区域 -->
    <div class="afterbody">
        <div class="centre service">
            <ul>
                <li style="border-right: 1px solid #e0e0e0;">
                    <a href="#">
                        <span class="iconfont icon-buoumaotubiao46"></span> 预约维修服务
                    </a>
                </li>
                <li style="border-right: 1px solid #e0e0e0;">
                    <a href="#">
                        <span class="iconfont icon-7tiantuihuanhuo"></span> 七天无理由退货
                    </a>
                </li>
                <li style="border-right: 1px solid #e0e0e0;">
                    <a href="#">
                        <span class="iconfont icon-15tianwuliyoutuihuo"></span> 15天免费换货
                    </a>
                </li>
                <li style="border-right: 1px solid #e0e0e0;">
                    <a href="#">
                        <span class="iconfont icon-liwu"></span> 满99元包邮
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="iconfont icon-dizhi"></span> 520余家售后网点
                    </a>
                </li>
            </ul>
        </div>
        <div class="centre service-link">
            <ul>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">帮助中心</h1>
                        <a href="#" class="service-a">账户管理</a>
                        <a href="#" class="service-a">购物指南</a>
                        <a href="#" class="service-a">订单操作</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">服务支持</h1>
                        <a href="#" class="service-a">售后政策</a>
                        <a href="#" class="service-a">自助服务</a>
                        <a href="#" class="service-a">相关下载</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">线下门店</h1>
                        <a href="#" class="service-a">小米之家</a>
                        <a href="#" class="service-a">服务网店</a>
                        <a href="#" class="service-a">授权体验店</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">关于小米</h1>
                        <a href="#" class="service-a">了解小米</a>
                        <a href="#" class="service-a">加入小米</a>
                        <a href="#" class="service-a">投资者关系</a>
                    </div>
                </li>
                <li>
                    <div>
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">关注我们</h1>
                        <a href="#" class="service-a">新浪微博</a>
                        <a href="#" class="service-a">官方微信</a>
                        <a href="#" class="service-a">联系我们</a>
                    </div>
                </li>
                <li>
                    <div style="border-right: 1px solid #e0e0e0">
                        <h1 style="padding-bottom: 26px;color: #424242;font-size: 16px">特色服务</h1>
                        <a href="#" class="service-a">F 码通道</a>
                        <a href="#" class="service-a">礼物码</a>
                        <a href="#" class="service-a">防伪查询</a>
                    </div>
                </li>
            </ul>
            <div class="callme">
                <p style="font-size: 22px;color: red;margin: 0 0 10px;text-align: center">400-100-5678</p>
                <p style="text-align: center;color: #424242;font-size: 12px;margin: 0 0 16px">
                    8:00-18:00（仅收市话费）
                </p>
                <div class="relation">
                    <a href="#">人工客服</a>
                </div>
                <div class="links">关注小米：
                    <a href="#" class="iconfont icon-xinlang"></a>
                    <a href="" class="iconfont icon-weixin"></a>
                </div>

            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="firm">
            <div class="centre">
                <div class="firm_logo"><img src="./images/logo-footer.png" alt="" style="margin-right: 12px;float: left"></div>
                <p class="below-1">
                    <a href="#">小米商城</a>
                    <span class="spn-new">|</span>
                    <a href="#">MIUI</a>
                    <span class="spn-new">|</span>
                    <a href="#">米家</a>
                    <span class="spn-new">|</span>
                    <a href="#">米聊</a>
                    <span class="spn-new">|</span>
                    <a href="#">多看</a>
                    <span class="spn-new">|</span>
                    <a href="#">游戏</a>
                    <span class="spn-new">|</span>
                    <a href="#">米粉卡</a>
                    <span class="spn-new">|</span>
                    <a href="#">政企服务</a>
                    <span class="spn-new">|</span>
                    <a href="#">小米天猫店</a>
                    <span class="spn-new">|</span>
                    <a href="#">隐私政策</a>
                    <span class="spn-new">|</span>
                    <a href="#">问题反馈</a>
                    <span class="spn-new">|</span>
                    <a href="#">廉正举办</a>
                    <span class="spspn-new">|</span>
                    <a href="#">select region</a>
                </p>
                <br>
                <p class="below-2">
                    <a href="#">mi.com</a>
                    <a href="#">京ICP证110507号</a>
                    <a href="#">京ICP备10046444号</a>
                    <a href="#">京公网安备11010802020134号</a>
                    <a href="#">京网文[2017]1530-131号 </a>
                    <br>
                    <a href="#">（京）网械平台备字（2018）第00005号</a>
                    <a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a>
                    <a href="#">营业执照</a>
                    <a href="#">医疗器械公告</a>
                    <br>
                    <a href="#">违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a>
                </p>
                <div class="make-img">
                    <img src="./images/truste.png" alt="">
                    <img src="./images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                    <img src="./images/v-logo-1.png" alt="">
                    <img src="./images/v-logo-2.png" alt="">
                    <img src="./images/v-logo-3.png" alt="">

                </div>

            </div>
            <div class="xiaomi">探索黑科技，小米为发烧而生</div>
        </div>

    </div>
</body>

</html>